<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>


    <title>日程安排</title>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.css}" rel="stylesheet"/>
    <link th:href="@{/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css}" rel="stylesheet"/>
    <link th:href="@{/css/animate.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.css}" rel="stylesheet"/>

</head>

<body class="gray-bg">
<div class="row">
    <div class="col-sm-12">
        <div class="wrapper wrapper-content">
            <div class="row animated fadeInRight">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">
                        <div class="text-center float-e-margins p-md">
                            <a href="#" class="btn btn-large btn-primary" id="addSchedual">新增日程</a>
                        </div>
                        <div class="" id="ibox-content">

                            <div th:each="schedule : ${schedules}" id="vertical-timeline"
                                 class="vertical-container light-timeline">
                                <div class="vertical-timeline-block">
                                    <div class="vertical-timeline-icon navy-bg">
                                        <i class="fa fa-briefcase"></i>
                                    </div>

                                    <div class="vertical-timeline-content">
                                        <h2 th:text="${schedule.getSchedualTitle()}"></h2>
                                        <p th:text="${schedule.getSchedualContent()}">
                                        </p>
                                        <a th:href="'/schedule/del/'+${schedule.getSchedualId()}" style="margin: 2px"
                                           class="btn btn-sm btn-primary"> 删除</a>
                                        <a th:href="'/schedule/finish/'+${schedule.getSchedualId()}" style="margin: 2px"
                                           class="btn btn-sm btn-primary"> 完成</a>
                                        <a href="#" style="margin: 2px" onclick="modify(this)"
                                           class="btn btn-sm btn-primary"><input type="hidden" id="hiddenId" th:value="${schedule.getSchedualId()}"/> 修改 </a>
                                        <!--<input type="hidden" th:value="${schedule.getSchedualId()}"/>-->
                                        <span class="vertical-date">
                                         <!--<br/>-->
                                        <small th:text="${schedule.getShowTime()[0]} +'号'+${schedule.getShowTime()[1]}+'点    至    '"></small>
                                        <small th:text="${schedule.getShowTime()[2]} +'号'+${schedule.getShowTime()[3]}+'点'"></small>
                                    </span>
                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<!-- 全局js -->
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>


<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/plugins/layer/layer.min.js}"></script>
<!-- 自定义js -->
<script th:src="@{/js/content.js}"></script>


<script>
    $(document).ready(function () {

        // // Local script for demo purpose only
        // $('#lightVersion').click(function (event) {
        //     event.preventDefault()
        //     $('#ibox-content').removeClass('ibox-content');
        //     $('#vertical-timeline').removeClass('dark-timeline');
        //     $('#vertical-timeline').addClass('light-timeline');
        // });
        //
        // $('#darkVersion').click(function (event) {
        //     event.preventDefault()
        //     $('#ibox-content').addClass('ibox-content');
        //     $('#vertical-timeline').removeClass('light-timeline');
        //     $('#vertical-timeline').addClass('dark-timeline');
        // });

        $('#leftVersion').click(function (event) {
            event.preventDefault()
            $('#vertical-timeline').toggleClass('center-orientation');
        });
        $('#addSchedual').click(function (event) {
            layer.open({
                type: 2,
                title: '新增日程安排',
                shadeClose: true,
                shade: false,
                area: ['500px', '60%'],
                content: '/schedule/toScheduleAdd' //iframe的url
            });
        });
        /* <![CDATA[ */

        /* ]]> */
    });
    function modify(object) {
        var scheduleId = object.children[0].value;
        layer.open({
            type: 2,
            title: '修改日程安排',
            shadeClose: true,
            shade: false,
            area: ['500px', '60%'],
            content: '/schedule/toScheduleModify/' + scheduleId //iframe的url
        });
    }

</script>


</body>

</html>
